<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">食品及原料进货索证台账登记本 / <span v-if="info.id == ''">新增记录</span><span v-else>编辑记录</span> /</div>
            <!-- <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">采购日期</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入日期" id="datepicker" class="layui-input" v-model="info.date">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入产品名称（含品牌）" autocomplete="off" class="layui-input" v-model="info.name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">产品规格</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入规格" autocomplete="off" class="layui-input" v-model="info.size">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">进货数量</label>
                    <div class="layui-input-block">
                        <input type="number" placeholder="请输入数量" autocomplete="off" class="layui-input" v-model="info.count">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">产品批号</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入批号" autocomplete="off" class="layui-input" v-model="info.no">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">保质期限</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请选择保质期限" id="expDatePicker" class="layui-input" v-model="info.exp">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">供货商</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入供货商" autocomplete="off" class="layui-input" v-model="info.supplier">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">联系方式</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入供货商联系方式" autocomplete="off" class="layui-input" v-model="info.supplierTel">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">索证</label>
                    <div class="layui-input-block">
                        <select v-model="info.prove" lay-filter="prove"><option value="0">无</option>
<option value="1">食品许可证</option>
<option value="2">营业执照</option>
<option value="3">检验证明</option>
<option value="4">购物凭证</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">送货人</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入送货人" autocomplete="off" class="layui-input" v-model="info.sender">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验收人</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入验收人" autocomplete="off" class="layui-input" v-model="info.acceptor">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">附件</label>
                    <div class="layui-input-block">
                        <ul class="am-list">
                            <li v-for="(item, index) in fileList">
                                <div class="file-item">
                                    <span><i class="am-icon-file-o"></i>&nbsp;{{ item.name }}</span>
                                    <div class="am-fr file-item-del" @click="delFile(index)">
                                        <i class="am-icon-trash"></i>
                                    </div>
                                    <div class="am-fr">
                                        <a :href="item.url"><i class="am-icon-download"></i></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <button type="button" class="layui-btn" id="uploadBtn">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                    </div>
                </div>
            </form>
            <div class="submit-wrap">
                <button class="am-btn am-btn-primary" @click="submit">确定</button>
            </div> -->
            <el-form ref="form" label-width="80px">
                <el-form-item label="采购日期">
                    <el-date-picker v-model="info.date" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :disabled="!editable">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="产品名称">
                    <!-- <el-input v-model="info.name" placeholder="请输入产品名称（含品牌）"></el-input> -->
                    <el-radio-group v-model="isNewStorage" @change="onIsNewChange" :disabled="!editable">
                        <el-radio-button :label="false">选择</el-radio-button>
                        <el-radio-button :label="true">新增</el-radio-button>
                    </el-radio-group>
                    <br />
                    <el-input v-model="info.storageId" placeholder="请输入产品名称" v-if="isNewStorage"></el-input>
                    <el-select v-model="info.storageId" filterable placeholder="请选择产品名称" @change="onStorageChange" :disabled="!editable" v-else>
                        <el-option v-for="(item, index) in storages" :key="item.attrs.id" :label="item.attrs.name" :value="item.attrs.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品分类" :class="{ hidden: isHidden }">
                    <el-input v-model="info.category" placeholder="请输入产品分类" :disabled="!sizeEditable"></el-input>
                </el-form-item>
                <el-form-item label="产品规格">
                    <el-input v-model="info.size" placeholder="请输入规格" :disabled="!(sizeEditable && editable)"></el-input>
                </el-form-item>
                <el-form-item label="进货数量">
                    <el-input v-model="info.count" type="number" placeholder="请输入数量" :disabled="!editable"></el-input>
                </el-form-item>
                <el-form-item label="产品批号">
                    <el-input v-model="info.no" placeholder="请输入产品批号"></el-input>
                </el-form-item>
                <el-form-item label="保质期限">
                    <el-date-picker v-model="info.exp" type="date" placeholder="选择保质期限" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="供货商">
                    <el-input v-model="info.supplier" placeholder="请输入供货商" :disabled="!editable"></el-input>
                </el-form-item> -->
                <el-form-item label="供货商">
                    <el-select v-model="selectedSupplier" filterable allow-create clearable placeholder="请选择" @change="onSupplierChange" :disabled="!editable">
                        <el-option v-for="(item, index) in suppliersData" :key="index" :label="item.supplier" :value="item.supplier">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="info.supplierTel" placeholder="请输入供货商联系方式" :disabled="!editable"></el-input>
                </el-form-item>
                <el-form-item label="索证">
                    <!-- <el-select v-model="info.prove" placeholder="请选择">
                        <el-option :value="0" label="无"></el-option>
                        <el-option :value="1" label="食品许可证"></el-option>
                        <el-option :value="2" label="营业执照"></el-option>
                        <el-option :value="3" label="检验证明"></el-option>
                        <el-option :value="4" label="购物凭证"></el-option>
                    </el-select> -->
                    <el-checkbox-group v-model="proveList">
                        <el-checkbox label="0">营业执照</el-checkbox>
                        <el-checkbox label="1">食品经营许可证</el-checkbox>
                        <el-checkbox label="2">食品流通许可证</el-checkbox>
                        <el-checkbox label="3">检验证明</el-checkbox>
                        <el-checkbox label="4">购物凭证</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="送货人">
                    <el-input v-model="info.sender" placeholder="请输入送货人" :disabled="!editable"></el-input>
                </el-form-item>
                <el-form-item label="验收人">
                    <el-input v-model="info.acceptor" placeholder="请输入验收人"></el-input>
                </el-form-item>
                <el-form-item label="附件" hidden>
                    <el-upload action="/boya/api/uploadFile" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                info: {
                    id: '',
                    date: this.dateFtt("yyyy-MM-dd", new Date()),
                    name: '',
                    size: '',
                    count: '',
                    no: '',
                    exp: this.dateFtt("yyyy-MM-dd", new Date()),
                    supplier: '',
                    supplierTel: '',
                    prove: '',
                    sender: '',
                    acceptor: '',
                    attachment: '',
                    storageId: '',
                    category: ''
                },
                fileList: [],
                storages: [],
                proveList: [],
                sizeEditable: false,
                editable: true,
                isNewStorage: false,
                isHidden: false,
                suppliersData: [{
                    supplier: "中山市黄圃镇顺兴粮食加工厂",
                    tel: "13543807922"
                }, {
                    supplier: "中山市黄圃镇桂姐副食店",
                    tel: "13420253539"
                }, {
                    supplier: "中山市南头镇美香饼家",
                    tel: "23111687"
                }, {
                    supplier: "中山市黄圃镇恒信点心店",
                    tel: "13432164782"
                }, {
                    supplier: "中山市小榄镇文慧牛奶商行",
                    tel: "15976801887"
                }, {
                    supplier: "中山市黄圃镇施萍猪肉档",
                    tel: "13420220918"
                }, {
                    supplier: "中山市黄圃镇迎丰盛冻品店",
                    tel: "13411664456"
                }, {
                    supplier: "中山市黄圃镇刘文东鸡蛋店",
                    tel: "13794178478"
                }, {
                    supplier: "中山市黄圃镇全根蔬菜店",
                    tel: "18933360557"
                }, {
                    supplier: "中山市黄圃镇艳红水果店",
                    tel: "15390986413"
                }, {
                    supplier: "中山市黄圃镇康家副食店",
                    tel: "13822713797"
                }, {
                    supplier: "中山市东凤镇明锋河粉厂",
                    tel: "13267608054"
                }, {
                    supplier: "中山市黄圃镇冯镜南鱼档",
                    tel: "13902824039"
                }, {
                    supplier: "中山市黄圃镇燕兴副食商行",
                    tel: "23218174"
                }, {
                    supplier: "中山市黄圃镇燕珍鱼档",
                    tel: "15119152227"
                }],
                selectedSupplier: ''
            }
        },
        mounted: function() {
            var self = this;
            // layui.use('form', function() {
            //     layui.form.on('select(prove)', function(data) {
            //         self.info.prove = data.value;
            //     });
            // });
            var infoJsonStr = '${info!}';
            if (infoJsonStr != '') {
                var obj = JSON.parse(infoJsonStr);
                console.log(obj);
                self.info.id = obj.id;
                self.info.date = obj.date;
                self.info.name = obj.name;
                self.info.size = obj.size;
                self.info.count = obj.count;
                self.info.no = obj.no;
                self.info.exp = obj.exp;
                self.info.supplier = obj.supplier;
                self.info.supplierTel = obj.supplierTel;
                self.info.prove = obj.prove;
                self.info.sender = obj.sender;
                self.info.acceptor = obj.acceptor;
                self.info.attachment = obj.attachment;
                self.info.storageId = obj.storageId;

                self.selectedSupplier = obj.supplier;

                self.editable = false;
                self.isHidden = true;
            }
            if (self.info.attachment && self.info.attachment != '') {
                var list = self.info.attachment.split(";");
                list.pop();
                for (var i = 0; i < list.length; i++) {
                    var map = {
                        name: list[i].split("=")[1],
                        url: list[i]
                    }
                    self.fileList.push(map);
                }
            }
            if (self.info.prove && self.info.prove != '') {
                self.proveList = self.info.prove.split(";");
                self.proveList.pop();
            }
            var storageStr = '${storages!}';
            if (storageStr != '') {
                this.storages = ${storages!'[]'}
            }
            if ('${school.role!0}' != '1') {
                var map = {
                    supplier: "中山市昊天食品有限公司",
                    tel: "13005550444",
                    proveList: ["0", "1", "4"]
                };
                self.suppliersData.push(map);
            }
            // layui.use('laydate', function() {
            //     var laydate = layui.laydate;
            //     laydate.render({
            //         elem: '#datepicker',
            //         format: 'yyyy-MM-dd',
            //         done: function(value, date, endDate) {
            //             self.info.date = value;
            //         }
            //     });
            //     var laydate2 = layui.laydate;
            //     laydate2.render({
            //         elem: '#expDatePicker',
            //         format: 'yyyy-MM-dd',
            //         done: function(value, date, endDate) {
            //             self.info.exp = value;
            //         }
            //     });
            // });
            // layui.use('upload', function() {
            //     var upload = layui.upload;

            //     //执行实例
            //     var uploadInst = upload.render({
            //         elem: '#uploadBtn', //绑定元素
            //         url: '/boya/api/uploadFile', //上传接口
            //         accept: 'file',
            //         done: function(res) {
            //             self.fileList.push({
            //                 name: res.info.split("=")[1],
            //                 url: res.info
            //             });
            //         },
            //         error: function() {
            //             msg("上传失败");
            //         }
            //     });
            // });
        },
        methods: {
            submit() {
                var self = this;
                if (self.info.date == '') {
                    msg("请选择日期");
                    return;
                }
                // if (self.info.name == '') {
                //     msg("请输入产品名称");
                //     return;
                // }
                if (self.info.storageId == '') {
                    msg("请选择产品名称");
                    return;
                }
                var files = '';
                for (var i = 0; i < self.fileList.length; i++) {
                    files += self.fileList[i].url + ";";
                }
                var prove = '';
                for (var i = 0; i < self.proveList.length; i++) {
                    prove += self.proveList[i] + ";";
                }
                var map = {
                    date: self.info.date,
                    name: self.info.name,
                    size: self.info.size,
                    count: self.info.count,
                    no: self.info.no,
                    exp: self.info.exp,
                    supplier: self.info.supplier,
                    supplierTel: self.info.supplierTel,
                    prove: prove,
                    sender: self.info.sender,
                    acceptor: self.info.acceptor,
                    attachment: files,
                    storageId: self.info.storageId,
                    category: self.info.category
                }
                if (self.info.id != '') {
                    map['id'] = self.info.id;
                }
                var param = Qs.stringify(map);
                axios({
                        url: '/boya/submitImport',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            var referer = '${referer!}';
                            if (referer) {
                                window.location.href = referer;
                            } else {
                                window.location.href = "/boya/importList";
                            }
                        } else {
                            msg("保存失败：" + response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        msg("保存失败");
                        console.log(error);
                    });
            },
            delFile(index) {
                var self = this;
                confirm("确认删除？", function() {
                    self.fileList.splice(index, 1);
                })
            },
            dateFtt(fmt, date) {
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            },
            handleSuccess(response, file, fileList) {
                var self = this;
                self.fileList = new Array;
                self.fileList.push({
                    name: response.info.split("=")[1],
                    url: response.info
                });
            },
            handlePreview(file) {
                window.location.href = file.url;
            },
            handleRemove(file, fileList) {
                this.fileList = new Array;
            },
            handleExceed(files, fileList) {
                this.$message.warning('只能上传 1 个文件');
            },
            beforeRemove(file, fileList) {
                return this.$confirm('确定移除 ' + file.name + '？');
            },
            onIsNewChange(val) {
                this.info.storageId = '';
                this.sizeEditable = this.isNewStorage;
            },
            onStorageChange(val) {
                var self = this;
                loading();
                var param = Qs.stringify({
                    id: val
                });
                axios({
                    url: '/boya/storageInfo',
                    method: 'post',
                    data: param,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(function(response) {
                    endLoading();
                    if (response.data.status == 200) {
                        console.log(response.data);
                        self.info.size = response.data.info.unit;
                        self.sizeEditable = false;
                        // } else if (response.data.status == 404) {
                        //     self.sizeEditable = true;
                    } else {
                        msg("获取信息失败：" + response.data.msg);
                        console.log(response.data);
                    }
                }).catch(function(error) {
                    msg("获取信息失败");
                    console.log(error);
                });
            },
            onSupplierChange(val) {
                var self = this;
                self.info.supplier = val;
                for (var i = 0; i < self.suppliersData.length; i++) {
                    var item = self.suppliersData[i];
                    if (item.supplier == val) {
                        self.info.supplierTel = item.tel;
                        if (item.proveList) {
                            self.proveList = item.proveList;
                        } else {
                            self.proveList = [];
                        }
                        break;
                    }
                }
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 3rem;
        font-size: 1.2em;
    }

    .layui-form-label {
        width: 100px;
    }

    .file-item {
        padding: 1rem;
    }

    .file-item .file-item-del {
        margin-left: 1rem;
        color: red;
        cursor: pointer;
    }

    .submit-wrap {
        padding-left: 110px;
    }

    .el-upload__input {
        display: none !important
    }

    .hidden {
        display: none;
    }
    </style>
</body>

</html>